<template>
    <div>
        <header-footer :commonData="{$parent:$parent}">
            <div class="online_apply" v-cloak>
                <div class="crumb">
                    <ul>
                        <li class="color666 f_left">当前位置：</li>
                        <li>
                            <router-link class="color666 f_left" to="/home">首页></router-link>
                        </li>
                        <li class="color666 f_left">在线报名</li>
                    </ul>
                </div>
                <div class="border_content text_center" v-if="stepIndex==0">
                    <img src="/static/img/title1.png" class="contTitleImg">
                    <h3 class="apply_title">建筑施工三类人员继续教育报名</h3>
                    <h4 class="apply_title_explain">请填写您的报名信息</h4>
                    <el-form class="apply_form" label-width="180px" style="width: 560px;">
                        <el-form-item class="text_left" label="姓名：">
                            <p class="apply_p">{{form.userName}}</p>
                        </el-form-item>
                        <el-form-item class="text_left" label="身份证号：">
                            <p class="apply_p">{{form.identity}}</p>
                        </el-form-item>
                        <el-form-item class="text_left" label="课时：">
                            <p class="apply_p">{{pruduct.period}}课时</p>
                        </el-form-item>
                        <el-form-item class="text_left" label="价格：">
                            <p class="apply_p">{{pruduct.productPrice}}元</p>
                        </el-form-item>
                        <el-form-item label="选择发票：" class="choose_project">
                            <el-input v-model="invoiceTitle" readonly @focus="ticketDialogs = true"></el-input>
                            <a type="button" class="select_class" @click="invoiceFunc">选择发票</a>
                        </el-form-item>
                        <el-form-item class="apply_btns">
                            <router-link class="apply_return" to="/cont_education/index">返回</router-link>
                            <a @click="onSubmit">确认提交</a>
                        </el-form-item>
                    </el-form>
                    <!-- 选择发票 -->
                    <ticketDialog ref="invoiceChild" @ticketDialogBtn="invoiceBtn"></ticketDialog>
                </div>
                <div class="border_content text_center" v-if="stepIndex==1">
                    <img src="/static/img/title2.png" class="contTitleImg">
                    <h3 class="apply_title">建筑施工三类人员继续教育报名</h3>
                    <h4 class="apply_title_explain">请确认您的报名信息</h4>
                    <el-form class="apply_form" ref="form" :rule="form" label-width="180px" style="width: 560px;">
                        <el-form-item class="text_left" label="姓名：">
                            <p class="apply_p">{{form.userName}}</p>
                        </el-form-item>
                        <el-form-item class="text_left" label="身份证号：">
                            <p class="apply_p">{{form.identity}}</p>
                        </el-form-item>
                        <el-form-item class="text_left" label="课时：">
                            <p class="apply_p">{{pruduct.period}}课时</p>
                        </el-form-item>
                        <el-form-item class="text_left" label="价格：">
                            <p class="apply_p">{{pruduct.productPrice}}元</p>
                        </el-form-item>
                        <el-form-item label="发票抬头：" class="choose_project">
                            <p class="apply_p">{{invoiceTitle}}</p>
                        </el-form-item>
                        <el-form-item label="发票类型：" class="choose_project">
                            <p v-if="pruduct.invoiceType==0" class="apply_p">个人</p>
                            <p v-if="pruduct.invoiceType==1" class="apply_p">普票</p>
                        </el-form-item>
                        <el-form-item class="apply_btns confirm_btns">
                            <p style="color: #FF0000;font-size: 18px;width: 600px;text-align: left;margin-bottom: 10px;">提示：支付宝扫码完成付款后请等待页面跳转完成后再关闭网页!</p>
                            <a class="apply_return" @click="prevStep">上一步</a>
                            <a @click="confirmPay">去付款</a>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </header-footer>
    </div>
</template>

<script>
    import headerFooter from '../../../components/cont_education/header_and_footer.vue'
    import ticketDialog from '../../../components/invoice_lists.vue'
    export default {
        name: "y_slry_apply",
        data: function() {
            return {
                stepIndex: 0, //是否显示选择专业弹框
                dialogNoPay: false,
                form: {
                    identity: "",
                    userName: "",
                    typeName: ""
                },
                dialogVisible: false, //选择专业
                ticketDialogs: false, //选择发票
                invoiceTitle: "",
                currentApply: undefined,
                pruduct: {
                    period: 24,
                    productPrice: 0,
                    invoiceTempId: "",
                    invoiceType: 0,
                    productCode: "slrytsjy",
                },
                products:[]
            }
        },
        mounted: function() {
            var that = this;
            this.common.post(this.api.getCombApply, {}, function(res) {
                var info = res.resultMap;
                that.form.userName = info.realName;
                that.form.identity = info.identityCode;
            });
            this.common.post(this.api.getProducts, {}, function(res) {
                that.products = res.resultMap;
                that.countPrice();
            });
        },
        methods: {
            invoiceBtn: function(data) {
            	this.invoiceTitle = data.invoiceTitle;
            	this.pruduct.invoiceType = data.invoiceType;
            	this.pruduct.invoiceTempId = data.invoiceTempId;
            },
            invoiceFunc: function() {
                console.log(11)
            	this.$refs.invoiceChild.getInvoiceTemp();
            },
            countPrice:function(){
                var that = this;
                this.products.forEach(function(v,i){
                    if(!String.isEmptyOrNUll(that.pruduct.productCode)){
                        if(that.pruduct.productCode==v.productCode){
                            that.pruduct.productPrice=parseInt(v.productPrice);
                        }
                    }
                });
            },
            // 报名确认
            onSubmit: function() {
                var that = this;
                if (that.pruduct.invoiceTempId == "") {
                    this.$message.error('请选择发票！');
                    return;
                }
                this.stepIndex = 1;
            },
            //上一步
            prevStep: function() {
                this.stepIndex = 0;
            },
            //去付款
            confirmPay: function() {
                var that = this;
                
                this.common.post(this.api.launchJzsgApplyTrade, this.pruduct, function(data) {
                    that.common.toPage("/home/apply/zhifubaopre/" + data.resultMap);
                }, function(error) {
                    that.$message.error(error.resultMsg);
                });
            }
        },
        components: {
            headerFooter,
            ticketDialog
        }
    }
</script>

<style>
    .header {
        width: 1150px;
		margin: 0 auto;
    }

    .el-checkbox {
        margin-right: 0;
    }
</style>
